<!DOCTYPE html>
<div id="element"></div>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(function () {
  element.style.cssText = 'background-color: red !important;';
  element.style.background = '';
  assert_equals(element.style.cssText, '');

  element.style.cssText = 'background-color: red !important;';
  element.style.backgroundColor = '';
  assert_equals(element.style.cssText, '');

  element.style.cssText = 'background: red !important;';
  element.style.background = '';
  assert_equals(element.style.cssText, '');

  element.style.cssText = 'background: red !important;';
  element.style.backgroundColor = '';
  assert_equals(getComputedStyle(element).backgroundColor, 'rgba(0, 0, 0, 0)');
}, "setProperty() clears !important shorthand properties for background-color");

test(function () {
  element.style.cssText = 'border-color: red !important;';
  element.style.border = '';
  assert_equals(element.style.cssText, '');

  element.style.cssText = 'border-color: red !important;';
  element.style.borderColor = '';
  assert_equals(element.style.cssText, '');

  element.style.cssText = 'border: 2px solid red !important;';
  element.style.border = '';
  assert_equals(element.style.cssText, '');

  element.style.cssText = 'border: 2px solid red !important;';
  element.style.borderColor = '';
  assert_equals(getComputedStyle(element).borderColor, 'rgb(0, 0, 0)');
}, "setProperty() clears !important shorthand properties for border-color");
</script>
